<template>
  <div>
      <header>
          <div class="title">启动脚本</div>
          <div class="header_content">在此启用或禁用已安装的启动脚本，更改在设备重启后生效。</div>
          <div class="header_content">警告：如果禁用了必要的启动脚本，比如"network",可能会导致无法访问设备</div>
      </header>
      <div class="content">
          <el-table :data="tableData"  stripe>
              <el-table-column prop="prioity" label="启动优先级" align="center"></el-table-column>
              <el-table-column prop="script" label="启动脚本" align="center"></el-table-column>
              <el-table-column prop="state" label="启动/禁用" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.state=='start'">
                        <el-button type="primary" size="medium" >启用</el-button>
                    </div>
                    <div v-else>
                        <el-button type="danger" size="medium" >禁用</el-button>
                    </div>
                </template>
              </el-table-column>
              <el-table-column prop="start" label="启动" align="center">
                  <template>
                      <div>
                          <el-button type="success" size="medium">启动</el-button>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="restart" label="重启" align="center">
                  <template>
                      <div>
                          <el-button type="warning" size="medium">重启</el-button>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="close" label="关闭" align="center">
                  <template>
                      <div>
                          <el-button type="danger" size="medium">关闭</el-button>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
          
      </div>
      <header>
          <div class="title">
              本地启动脚本
          </div>
          <div class="header_content">启动脚本插入到'exit 0'之前即可随系统启动运行</div>
      </header>
      <div class="content">
          <textarea name="" id="" cols="30" rows="10" :value="textareaValue" style="height:100%;width:100%;resize: none"></textarea>
      </div>
      <div class="button_box">
          <el-button type="primary" size="default">提交</el-button>
          <el-button type="success" size="default">复位</el-button>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            //文本区域默认值
            textareaValue:`#Put your commands here should be executed once
#the system Init finished.By default this file does nothing.
            
exit 0`,
            tableData:[
                {
                    prioity:0,
                    script:'sysfixtime',
                    state:'start'
                },
                {
                    prioity:1,
                    script:'urngd',
                    state:'start'
                },
                {
                    prioity:3,
                    script:'boot',
                    state:'start'
                },
                {
                    prioity:10,
                    script:'system',
                    state:'close'
                },
                {
                    prioity:11,
                    script:'sysctl',
                    state:'start'
                },
                {
                    prioity:12,
                    script:'log',
                    state:'start'
                },
                {
                    prioity:30,
                    script:'mia',
                    state:'close'
                },

            ]
        }
    }
}
</script>

<style scoped lang="less">
header{
    font-size: 24px;
    .title{
        color: #000;
        margin-bottom: 20px;
    }
    .header_content{
        color: #999;
        font-size: 13px;
    }
}
.content{
    box-shadow: 0 0 10px #DEE1E6;
    margin: 30px 0;
    padding: 20px;

}
.button_box{
    display: flex;
    justify-content: flex-end;
}
</style>